:root {
	--bg: #fafafa;
	--card: #ffffff;
	--border: #eaeaea;
	--text: #222;
	--muted: #666;
	--primary: #1677ff;
	--dark-bg: #0b0f14;
	--dark-card: #0f1722;
	--dark-border: #1f2a3a;
	--dark-text: #e6edf3;
	--dark-muted: #9fb3c8;
}

* { box-sizing: border-box; }
html, body, #app { height: 100%; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif; background: var(--dark-bg); color: var(--dark-text); }

.page {
	height: 100%;
	display: flex;
	flex-direction: column;
	min-height: 0;
}
.card {
	background: var(--dark-card);
	border: 1px solid var(--dark-border);
	border-radius: 12px;
	box-shadow: 0 10px 28px rgba(0,0,0,0.25);
}
.chat-shell { max-width: 900px; margin: 16px auto; padding: 0 12px; }
.chat-shell .chat-container { max-height: 72vh; }
.chat-shell .chat-list { min-height: 44vh; }
.btn { background: linear-gradient(135deg, #1f6feb, #7aa2f7); color: #fff; border: 0; border-radius: 10px; padding: 10px 16px; cursor: pointer; }
.btn:disabled { opacity: .6; cursor: not-allowed; }

.chat-container {
	display: flex;
	flex-direction: column;
	padding: 12px;
	flex: 1;
	min-height: 0; /* 允许内部列表成为滚动容器 */
}
.chat-list {
	flex: 1;
	overflow-y: auto;
	padding: 12px;
	background: var(--dark-card);
	border: 1px solid var(--dark-border);
	border-radius: 10px;
}
.chat-item { display: flex; align-items: flex-start; margin: 10px 0; gap: 8px; }
.chat-item.user { flex-direction: row-reverse; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: #eef3ff; border: 1px solid #dbe6ff; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; }
.bubble-wrap { max-width: 80%; }
.chat-bubble {
	max-width: 100%;
	padding: 10px 12px;
	border-radius: 10px;
	line-height: 1.5;
	white-space: pre-wrap;
	word-break: break-word;
	overflow-wrap: anywhere;
}
.chat-item.user .chat-bubble { background: #193a6b; border: 1px solid #2b5da3; color: #dbe9ff; }
.chat-item.ai .chat-bubble { background: #141b2a; border: 1px solid #23324b; text-align: left; }

.chat-input {
	display: flex;
	margin-top: 12px;
	gap: 8px;
	flex-shrink: 0; /* 防止被挤压 */
}
.chat-input textarea {
	flex: 1;
	resize: vertical;
	min-height: 44px;
	max-height: 160px;
	padding: 10px 12px;
	border: 1px solid var(--dark-border);
	border-radius: 8px;
}
.chat-input button {
	padding: 0 16px;
	background: linear-gradient(135deg, #1f6feb, #7aa2f7);
	color: #fff;
	border: none;
	border-radius: 8px;
	height: 44px;
	cursor: pointer;
}
.muted { color: var(--dark-muted); }

/* 响应式 */
@media (max-width: 1024px) {
	.chat-bubble { font-size: 15px; }
	.avatar { width: 28px; height: 28px; font-size: 16px; }
}
@media (max-width: 640px) {
	.chat-list { padding: 10px; }
	.chat-input textarea { min-height: 40px; }
	.bubble-wrap { max-width: 85%; }
}


